<template>
	<view class="personnelManagement">
		<view class="ff-padding-bottom-4">
			<view class="personnelManagement-content" v-if="staffList.length > 0">
				<view v-for="(item, index) of staffList" :key="index"
					class="personnelManagement-content-box ff-border-radius-10 ff-margin-bottom-10 ff-bg-fff">
					<view class="ff-flex-between ff-align-items-one">
						<view class="ff-flex">
							<view>
								<image v-if="item.staffType == 5" class="personnelManagement-content-box-headerImg"
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/org-staff.png"
									mode=""></image>
								<view v-if="item.staffType == 1">
									<image v-if="item.staffPhone == userInfo.org.legalPersonPhone"
										class="personnelManagement-content-box-headerImg"
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/org-legal.png"
										mode=""></image>
									<image v-else class="personnelManagement-content-box-headerImg"
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/org-admin.png"
										mode=""></image>
								</view>
							</view>
							<view class="personnelManagement-content-box-info ff-margin-left-12">
								<view class="ff-font-16 ff-font-weight-600 ff-align-items-one ff-margin-bottom-6">
									{{ item.username }}
									<view>
										<image v-if="item.userStatus == 0"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/org-normal.png"
											mode=""></image>
										<image v-if="item.userStatus == 1"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/org-disable.png"
											mode=""></image>
										<image v-if="item.userStatus == 2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/org-foreverDisable.png"
											mode=""></image>
									</view>
								</view>
								<view class="ff-font-14 ff-margin-bottom-5">
									<image
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/staff-phone.png"
										mode=""></image>
									<text @click="staffPhoneClick(item.staffPhone)"
										class="ff-color-blue">{{ item.staffPhone }}</text>
								</view>
								<view class="ff-font-14 ff-margin-bottom-5">
									<image
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/org-card.png"
										mode=""></image>
									{{ item.staffIdCard }}
								</view>
								<view class="charge">
									<image v-if="item.position == '技术负责人'"
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/org-technicalDirector.png"
										mode=""></image>
									<image v-if="item.position == '项目负责人'"
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/org-projectLeader.png"
										mode=""></image>
								</view>
								<view class="ff-margin-top-6 ff-line-height-1-4 ff-font-14" v-if="item.macroName">
									{{ item.macroName }}
								</view>
							</view>
						</view>
						<view class="personnelManagement-content-box-but">
							<view v-if="item.staffType == 1">
								<view
									v-if="(userInfo.phone != item.staffPhone) && (userInfo.phone == userInfo.org.legalPersonPhone)"
									@click="removeClick(item)" class="but3 ff-font-13">
									移除身份
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
					bg-color="#f5f5f5">没有更多了</u-divider>
			</view>
			<f-noData v-else></f-noData>
		</view>
		<u-back-top :scrollTop="scrollTop" top="200" mode="circle" :iconStyle="iconStyle"
			:customStyle="customstyle"></u-back-top>
		<!-- -----------------------------弹框区------------------------------ -->
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-modal v-model="locationRemove" @confirm="removeConfirm" title="温馨提示" show-cancel-button="true"
			:content-style="{ 'line-height': '1.5' }" content="您确定要移除该员工管理员身份吗？" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'personnelManagement',
		data() {
			return {
				locationRemove: false, // 删除弹框的显/隐
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#FFFFFF'
				},
				customstyle: {
					background: '#3B83FE'
				},
				staffList: [], // 机构员工列表数据
				params: {
					current: 1,
					size: 8,
					statuses: null, // 状态(0:未审核 1:已审核 5:已禁用)
					orgId: ''
				},
				noData: false, // 暂时没有更多数据state
				removeId: '' // 删除某一个人员的id
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getStaffList(); // 获取员机构工列表数据
		},
		// 上拉加载
		onReachBottom() {
			this.params.current++;
			this.getStaffList(); // 获取员机构工列表数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			let that = this;
			that.params.current = 1;
			that.getStaffList(); // 获取员机构工列表数据
			setTimeout(() => {
				that.$refs.uToast.show({
					title: '刷新成功',
					type: 'success'
				});
				uni.stopPullDownRefresh(); // 停止刷新
			}, 100);
		},
		computed: {
			tabberStyle() {
				return `top:${this.customBar}px;`;
			},
			...mapState({
				userInfo: modules => modules.infoList.userInfo
			}) // 获取用户信息
		},
		methods: {
			// 拨打电话
			staffPhoneClick(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 获取机构员工列表数据
			async getStaffList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				this.params.orgId = this.userInfo.org.id;
				const data = await this.$http.post({
					url: '/serviceOrg/staff/page',
					data: this.params
				});
				// console.log('获取机构员工列表数据-------', data);
				if (data.code == 200) {
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.staffList = [];
					} else if (infoList.length < 6 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = true;
						this.staffList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.staffList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.staffList = this.staffList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 操作员工（移除管理员身份）
			removeClick(item) {
				this.locationRemove = true;
				this.removeId = item.id;
			},
			removeConfirm() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				this.$http.post({
					url: `/serviceOrg/remove/admin/${this.removeId}`
				}).then(res => {
					// console.log('操作员工身份移除--------', res);
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '身份移除成功！',
							type: 'success'
						});
						this.params.current = 1;
						this.getStaffList(); // 获取的数据列表
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
					this.$refs.loading.closeLoading(); // 关闭loading动画
				});
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.personnelManagement {
		/deep/.u-badge--bg--error {
			right: 30% !important;
		}

		&-tabs {
			position: fixed;
			left: 0;
			z-index: 9;
			width: 100%;
		}

		&-content {
			margin: 20rpx 24rpx;

			&-box {
				padding: 30rpx;

				&-headerImg {
					width: 96rpx;
					height: 96rpx;
				}

				&-info {
					.ff-font-16 {
						color: #0b0e11;

						image {
							margin-left: 4rpx;
							width: 135rpx;
							height: 39rpx;
						}
					}

					.ff-font-14 {
						color: #5c5f65;

						image {
							width: 25rpx;
							height: 25rpx;
							margin: 0 6rpx -3rpx 0;
						}
					}

					.charge {
						image {
							width: 135rpx;
							height: 39rpx;
						}
					}
				}

				&-but {
					.but1 {
						color: #ef312e;
					}

					.but2 {
						background-color: #3178ff;
						padding: 16rpx 30rpx;
					}

					.but3 {
						color: #3178ff;
					}
				}
			}
		}
	}
</style>